<template>
    <basic-container>
        <div class="header-container">
            <TitleComponent mainTitle="用户IP检测" subTitle="列表" />
            <el-button type="primary" class="add-button" @click="handleAdd">新增</el-button>
        </div>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @on-load="onLoad" @select="handleSelect">


            <template #menu-left="{ row }">
                <el-button type="danger" size="small" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
            </template>


            <template #test1="{ row }">
                <el-switch v-model="row.test1" style="--el-switch-on-color: #4E9876; " :inactive-value="0"
                    @change="handleSwitchChange('test1')" />
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus'
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import { useRouter } from 'vue-router';
import BasicContainer from '@/components/basic-container/main.vue';

let option: any = reactive({
    height: 'auto',
    calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    dialogWidth: '40%',
    menuFixed: 'right',
    gridBtn: false,
    labelWidth: 130,
    menu: false,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "ID",
            prop: "index",
            // search: true,
            sortable: true,
            span: 24,
        },
        {
            label: "登陆手机号",
            prop: "account",
            // search: true,
            span: 24,
        },
        {
            label: "IP",
            prop: "test",
            // search: true,
            span: 24,
        },
        {
            label: "禁用此IP",
            prop: "test1",
            span: 24,
        },
        {
            label: "创建时间",
            prop: "test2",
            span: 24,
        },
        {
            label: "更新时间",
            prop: "test3",
            sortable: true,
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: [],
    firstLoad: true, // 添加一个标志表示是否是首次加载
    selectedData: [] // 存储选中的数据
})


// 处理用户选择数据行的事件
const handleSelect = (selection, row) => {
    // 将选中的行添加到 selectedRows 数组中
    console.log('selection', selection);
    console.log('row', row);

    crudData.selectedData.push(row);
};

// 批量删除


const handleDelete = async () => {
    const selectionList = crudData.selectedData; // Assuming getSelectionRows is available
    console.log('删除前', selectionList);

    if (!selectionList || selectionList.length === 0) {
        ElMessage.warning("请选择至少一条数据");
        return;
    }

    try {
        await ElMessageBox.confirm("确定将选择的数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        });

        const ids = selectionList.map(item => item.id).join(",");
        // Assuming `remove` is a function to delete data
        // await remove(ids);

        // Reload the data or refresh the view
        onLoad();
        ElMessage.success("操作成功!");
        // Assuming toggleSelection can clear selection
        crudData.selectedData = [];
        console.log('删除后', crudData.selectedData);

    } catch (error) {
        if (error !== 'cancel') {
            console.log('Error:', error);
        }
    }
};


const handleSwitchChange = (field) => {
    if (!crudData.firstLoad) { // 只有在非首次加载时才显示消息
        console.log(`Field: ${field}`);
        // 添加更新数据请求
        // 请求返回结果输出
        ElMessage.success('更新成功');
    }
}

// 跳转路由
const router = useRouter();

const handleAdd = () => {
    router.push('/user/userIpDetection/add');
}


const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            id: '662303',
            index: '662303',
            account: '4412349654',
            test: '212.87.194.6',
            test1: 'VIP3',
            test2: '2023-06-19 05:40:22',
            test3: '2024-06-18 05:48:04',
            test4: '2023-06-19 05:29:59',
        },
        {
            id: '662301',
            index: '662301',
            account: '441223784',
            test: '36.5.220.246',
            test1: 'VIP4',
            test2: '2023-06-17 05:40:22',
            test3: '2024-06-12 05:48:04',
            test4: '2023-06-14 05:29:59',
        }
    ]
    crudData.page.total = crudData.data.length;
    setTimeout(() => {
        crudData.firstLoad = false;
    }, 1000);


    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //     // crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-right: 20px;
}

.add-button {
    margin-left: 20px;
}
</style>